<script setup lang="ts">
import SelectOperationProcess from "@/components/SelectInfo/SelectOperationProcess.vue";
import SelectWorkActivity from "@/components/SelectInfo/SelectWorkActivity.vue";
import { onMounted, reactive, ref, watch } from "vue";
import { useDictInfo } from "@/store/dict";
import SelectStorage from "@/components/SelectInfo/SelectStorage.vue";
import SelectPackageType from "@/components/SelectInfo/SelectPackageType.vue";
import SelectPosition from "@/components/SelectInfo/SelectPosition.vue";
import { useBillInfo } from "@/store/bill-info";
import BigNumber from "bignumber.js";
import { type ConfigProviderThemeVars, showFailToast } from "vant";
import { useEditOstInfo } from "@/store/edit-ost-info";
import {
  GetAssignMachineTree,
  GetAssignWorker,
  GetShipArrange,
  GetTallyMachineTree
} from "@/api/tally";
import SelectShipArrange from "@/components/SelectInfo/SelectShipArrange.vue";
import SelectHold from "@/components/SelectInfo/SelectHold.vue";
import SelectLandArrange from "@/components/SelectInfo/SelectLandArrange.vue";
import SelectTeam from "@/components/SelectInfo/SelectTeam.vue";
import { isNumeric } from "vant/es/utils";
import YardMapV2 from "@/components/TallyType/YardMapV2.vue";
import type { MachineTreeItem, PackageTypeData, PositionData, StorageData } from "@/utils/interface";

const emit = defineEmits(["result"]);
const input = defineProps(["shipId", "tallyDate", "timeSpace"]);

const dictStore = useDictInfo();
const billInfoStore = useBillInfo();
const editOstInfoStorage = useEditOstInfo();

const billInfo = ref({} as any);
const shipLandList = ref([] as Array<any>);

const themeVars: ConfigProviderThemeVars = {
  cellLabelFontSize: "13px",
  fieldInputTextColor: "#7f7e7e",
  numberKeyboardZIndex: 1000,
  cellBorderColor: "#cccccc",
  borderWidth: "1.5px",
  cellHorizontalPadding: "0px",
  cellVerticalPadding: "10px",
  radioDotSize: "5px",
  radioLabelMargin: "3px",
  navBarTitleTextColor: "#ffffff",
  navBarIconColor: "#ffffff",
  fontBold: 0,
  popupBackground: "#f6f6f6"
};

onMounted(() => {
  init();
});
billInfoStore.$subscribe(() => {
  init();
});

function init() {
  shipLandList.value = dictStore.getDictByCode("ship_land");
  billInfo.value = billInfoStore.billInfo;
  formData.oriLeftPieceTon =
    billInfo.value?.storagePiece + "/" + billInfo.value?.storageTon;
  if (billInfo.value.piece !== 0) {
    const ton = new BigNumber(billInfo.value.ton);
    const piece = new BigNumber(billInfo.value.piece);
    formData.perTon = ton.div(piece).toNumber();
  } else {
    formData.perTon = 0;
  }
}

// 填写件数算吨数
function setPerTon() {
  billInfo.value = billInfoStore.billInfo;
  if (billInfo.value.transportBillId && billInfo.value.piece !== 0) {
    const ton = new BigNumber(billInfo.value.ton);
    const piece = new BigNumber(billInfo.value.piece);
    formData.perTon = ton.div(piece).toNumber();
  } else {
    formData.perTon = 0;
  }
}

function setOriTon() {
  setPerTon();
  if (formData.oriPiece && formData.perTon) {
    formData.oriTon = new BigNumber(formData.oriPiece as string)
      .times(formData.perTon)
      .toString();
  }
}

function setToTon() {
  setPerTon();
  if (formData.toPiece && formData.perTon) {
    formData.toTon = new BigNumber(formData.toPiece as string)
      .times(formData.perTon)
      .toString();
  }
}

const formData = reactive({
  shipLand: "",
  operationType: "",
  operationTypeName: "",
  workActivity: [] as string[],
  workActivityName: "",
  arrangeId: "",
  arrangeInfo: "",
  hold: "",
  holdName: "",
  holdsList: [] as any,
  workerInfo: "",
  company: "",
  companyName: "",
  team: "",
  teamName: "",
  groups: "",
  groupsName: "",
  originTeamList: [],
  machineTree: [] as MachineTreeItem[],
  machineList: [] as MachineTreeItem[],
  cars: "",
  oriGoodsPositionId: "",
  oriAreaCode: "",
  oriStorageInfo: "",
  oriStorageId: "",
  oriStorageAreaId: "",
  oriStorageAreaName: "",
  oriStoragePositionId: "",
  oriStoragePositionName: "",
  oriPackageType: "",
  oriPackageTypeName: "",
  oriSpot: "",
  oriLeftPieceTon: "",
  oriPiece: "",
  oriTon: "",
  perTon: 0,
  toStorageId: "",
  toGoodsPositionId: "",
  toAreaCode: "",
  toStorageAreaId: "",
  toStorageAreaName: "",
  toStoragePositionId: "",
  toStoragePositionName: "",
  toPackageType: "",
  toPackageTypeName: "",
  toPiece: "",
  toTon: "",
  toSpot: ""
});

watch(
  () => formData,
  newValue => {
    emit("result", newValue);
  },
  { immediate: true, deep: true }
);

// 编辑时初始化
watch(
  () => editOstInfoStorage.editOstInfo,
  newValue => {
    formData.shipLand = newValue?.shipLand;
    formData.operationType = newValue?.operationType;
    formData.operationTypeName = newValue?.operationTypeName;
    formData.workActivity = newValue?.workActivity
      ? newValue?.workActivity.split(",")
      : [];
    formData.workActivityName = newValue?.workActivityName;
    if (newValue?.oriStoragePositionName) {
      formData.oriStorageInfo =
        newValue?.oriStoragePositionName +
        "-" +
        newValue?.oriSpot +
        "-" +
        newValue?.oriPackageTypeName;
    }
    formData.oriStorageId = newValue?.oriStorageId;
    formData.oriStorageAreaId = newValue?.oriStorageAreaId;
    formData.oriStorageAreaName = newValue?.oriStorageAreaName;
    formData.oriStoragePositionId = newValue?.oriStoragePositionId;
    formData.oriStoragePositionName = newValue?.oriStoragePositionName;
    formData.oriPackageType = newValue?.oriPackageType;
    formData.oriPackageTypeName = newValue?.oriPackageTypeName;
    formData.oriSpot = newValue?.oriSpot;
    formData.oriLeftPieceTon = "";
    formData.oriPiece = newValue?.oriPiece;
    formData.oriTon = newValue?.oriTon;
    formData.oriStorageId = newValue?.oriStorageId;
    formData.oriGoodsPositionId = newValue?.oriGoodsPositionId;
    formData.oriAreaCode = newValue?.oriAreaCode;
    formData.toStorageAreaId = newValue?.toStorageAreaId;
    formData.toStorageAreaName = newValue?.toStorageAreaName;
    formData.toStoragePositionId = newValue?.toStoragePositionId;
    formData.toStoragePositionName = newValue?.toStoragePositionName;
    formData.toPackageType = newValue?.toPackageType;
    formData.toPackageTypeName = newValue?.toPackageTypeName;
    formData.toPiece = newValue?.toPiece;
    formData.toStorageId = newValue?.toStorageId;
    formData.toGoodsPositionId = newValue?.toGoodsPositionId;
    formData.toAreaCode = newValue?.toAreaCode;
    formData.toTon = newValue?.toTon;
    formData.toSpot = newValue?.toSpot;
    formData.company = newValue?.company;
    formData.companyName = newValue?.companyName;
    formData.team = newValue?.team;
    formData.teamName = newValue?.teamName;
    formData.groups = newValue?.groups;
    formData.groupsName = newValue?.groupsName;
    formData.workerInfo = newValue?.workerInfo;
    formData.arrangeId = newValue?.arrangeId;
    formData.arrangeInfo = newValue?.arrangeInfo;
    formData.cars = newValue?.cars;
    if (newValue?.shipLand === "SHIP") {
      formData.hold = newValue?.hold;
      formData.holdName = newValue?.holdName;

      GetShipArrange({ arrangeId: newValue?.arrangeId }).then((res: any) => {
        if (res.data) {
          formData.holdsList = res.data[0].holdsList;
        }
      });

      GetTallyMachineTree({ tallyId: newValue?.id }).then((res: any) => {
        if (res.success && res.data.length > 0) {
          formData.machineTree = res.data;
        }
      });
    }
  },
  { immediate: true }
);

const showSelectOperationProcessPopup = ref(false);

function beforeSelectOperationProcessOpen() {
  showSelectOperationProcessPopup.value = true;
}

const isSelectOperationProcessOpen = (value: boolean) => {
  showSelectOperationProcessPopup.value = value;
};
const selectedOperationProcess = (value: any) => {
  formData.operationType = value.id;
  formData.operationTypeName = value.name;
};

const showSelectWorkActivityPopup = ref(false);
const isSelectWorkActivityOpen = (value: boolean) => {
  showSelectWorkActivityPopup.value = value;
};
const selectedWorkActivity = (value: any) => {
  formData.workActivity = value.processIds;
  formData.workActivityName = value.processNames;
};

const validator = (val: any) => isNumeric(val);

const showSelectStoragePopup = ref(false);
const isSelectStorageOpen = (value: boolean) => {
  showSelectStoragePopup.value = value;
};
const selectedStorage = (res: StorageData) => {
  if (res.id) {
    if (res.positionName) {
      formData.oriStorageInfo =
        res.positionName + "-" + res.spot + "-" + res.packageTypeName;
    }
    formData.oriLeftPieceTon = res.piece + "/" + res.ton;
    formData.oriStorageId = res.id;
    formData.oriTon = res.ton;
    formData.oriPiece = String(res.piece);
    formData.oriPackageType = res.packageType;
    formData.oriPackageTypeName = res.packageTypeName;
    formData.oriStorageAreaId = res.areaId;
    formData.oriStorageAreaName = res.areaName;
    formData.oriStoragePositionId = res.positionId;
    formData.oriStoragePositionName = res.positionName;
    formData.oriSpot = res.spot;
    formData.oriAreaCode = res.areaCode;
    formData.oriGoodsPositionId = res.goodsPositionId;

    formData.toAreaCode = res.areaCode;
    formData.toStorageId = res.id;
    formData.toGoodsPositionId = res.goodsPositionId;
    formData.toPackageType = res.packageType;
    formData.toPackageTypeName = res.packageTypeName;
    formData.toStorageAreaId = res.areaId;
    formData.toStorageAreaName = res.areaName;
    formData.toStoragePositionId = res.positionId;
    formData.toStoragePositionName = res.positionName;
    formData.toSpot = res.spot;
    formData.toTon = res.ton;
    formData.toPiece = String(res.piece);
  }
};

const isSpotSelect = ref("Y");
const showSelectPackageTypePopup = ref(false);

const isSelectPackageTypeOpen = (value: boolean) => {
  showSelectPackageTypePopup.value = value;
};
const selectedPackageType = (value: PackageTypeData) => {
  formData.toPackageType = "";
  formData.toPackageTypeName = "";
  formData.toPackageType = value.customsPackageCode;
  formData.toPackageTypeName = value.packInfo;
};

const showSelectPositionPopup = ref(false);

const isSelectPositionOpen = (value: boolean) => {
  showSelectPositionPopup.value = value;
};
const selectedPosition = (value: PositionData) => {
  if (value.areaId) {
    formData.toStorageAreaId = value.areaId;
    formData.toStorageAreaName = value.areaName;
    formData.toStoragePositionId = value.id;
    formData.toStoragePositionName = value.name;
    formData.toAreaCode = value.code;
  }
};

const showSelectSpotPopup = ref(false);
const isSelectSpotOpen = (value: boolean) => {
  showSelectSpotPopup.value = value;
};
const selectedSpot = (res: StorageData) => {
  formData.toSpot = res.spot;
  formData.toPackageType = res.packageType;
  formData.toPackageTypeName = res.packageTypeName;
  formData.toGoodsPositionId = res.goodsPositionId;
  formData.toAreaCode = res.areaCode;
};

const showSelectArrangePopup = ref(false);
const showSelectHoldPopup = ref(false);

const isSelectArrangeOpen = (value: boolean) => {
  showSelectArrangePopup.value = value;
};
const selectedArrange = (value: any) => {
  formData.machineTree = [] as MachineTreeItem[];
  formData.workerInfo = "";
  formData.company = "";
  formData.companyName = "";
  formData.team = "";
  formData.teamName = "";
  formData.groups = "";
  formData.groupsName = "";

  const assignSearchParam = {
    arrangeId: "",
    loaderType: "LOADER_" + formData.shipLand
  };

  formData.arrangeId = "";
  formData.arrangeInfo = "";
  formData.holdsList = [];
  const allHold = {
    hold: "hold-quanchuan",
    holdName: "全船"
  };

  if (formData.shipLand === "SHIP") {
    formData.arrangeId = value.wasId;
    formData.arrangeInfo = value.lineNo + "-" + value.holdsName;
    formData.holdsList = value.holdsList;
    formData.holdsList.unshift(allHold);

    if (formData.holdsList.length > 2) {
      formData.holdName = allHold.holdName;
      formData.hold = allHold.hold;
    }

    if (formData.holdsList.length === 2) {
      formData.holdName = formData.holdsList[1].holdName;
      formData.hold = formData.holdsList[1].hold;
    }
  }

  if (formData.shipLand === "LAND") {
    formData.arrangeId = value.walId;
    formData.arrangeInfo = value.info;
  }

  assignSearchParam.arrangeId = formData.arrangeId;

  GetAssignWorker(assignSearchParam).then((res: any) => {
    if (res.success && res.data.length > 0) {
      const teamData = res.data[0];
      formData.workerInfo =
        teamData.companyName +
        "-" +
        teamData.teamName +
        "-" +
        teamData.groupName;
      formData.company = teamData.company;
      formData.companyName = teamData.companyName;
      formData.team = teamData.team;
      formData.teamName = teamData.teamName;
      formData.groups = teamData.groups;
      formData.groupsName = teamData.groupName;
    }
  });

  GetAssignMachineTree(assignSearchParam).then((res: any) => {
    if (res.success && res.data.length > 0) {
      formData.machineTree = res.data as MachineTreeItem[];
      formData.machineTree.forEach(mk => {
        mk.machineList.forEach(machine => {
          machine.isSelected = false;
        });
      });
    }
  });
};

const isSelectHoldOpen = (value: boolean) => {
  showSelectHoldPopup.value = value;
};
const selectedHold = (value: any) => {
  formData.hold = value.hold;
  formData.holdName = value.holdName;
};

const showSelectWorkerPopup = ref(false);

const isSelectTeamOpen = (value: boolean) => {
  showSelectWorkerPopup.value = value;
};
const selectedTeam = (value: any) => {
  formData.workerInfo = value.info;
  formData.company = value.company;
  formData.companyName = value.companyName;
  formData.team = value.team;
  formData.teamName = value.teamName;
  formData.groups = value.group;
  formData.groupsName = value.groupName;
  formData.originTeamList = value.originData;
};

const validate = () => {};
const onFailed = (value: any) => {
  showFailToast("请检查表单");
};

const showYard = ref(false);

const onSelectedArea = (e: any) => {
  console.log(e);
  showYard.value = false;
  if (isSpotSelect.value) {
    formData.toSpot = e.names;
  }
  formData.toGoodsPositionId = e.id;
};
</script>

<template>
  <van-config-provider :theme-vars="themeVars">
    <form @submit="validate" @failed="onFailed">
      <div
        id="operationProcess"
        class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
      >
        <div class="w h-[40px] flex justify-between">
          <div class="flex h w items-center font-bold">作业过程</div>
        </div>
        <van-cell-group :border="false">
          <van-field
            name="shipLand"
            label="航陆运"
            :rules="[{ required: true, message: '请选择航陆运' }]"
          >
            <template #label> 航陆运<span class="xing">*</span></template>
            <template #input>
              <van-radio-group
                shape="dot"
                v-model="formData.shipLand"
                direction="horizontal"
              >
                <van-radio
                  icon-size="18px"
                  :key="item?.dictKey"
                  v-for="item in shipLandList"
                  :name="item?.dictKey"
                  >{{ item?.dictValue }}
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            is-link
            readonly
            v-model="formData.operationTypeName"
            name="operationType"
            label="作业过程"
            placeholder="请选择作业过程"
            @click="beforeSelectOperationProcessOpen"
            :rules="[{ required: true, message: '请选择作业过程' }]"
          >
            <template #label> 作业过程<span class="xing">*</span></template>
          </van-field>
          <van-popup
            v-model:show="showSelectOperationProcessPopup"
            position="bottom"
            round
            duration="0"
            :style="{ height: 'auto' }"
          >
            <SelectOperationProcess
              :shipLand="formData.shipLand"
              @selectedOperationProcess="selectedOperationProcess"
              @isOpen="isSelectOperationProcessOpen"
            ></SelectOperationProcess>
          </van-popup>
          <van-field
            is-link
            readonly
            rows="1"
            autosize
            type="textarea"
            v-model="formData.workActivityName"
            name="作业活动"
            label="作业活动"
            placeholder="请选择作业活动"
            @click="showSelectWorkActivityPopup = true"
          />
          <van-popup
            v-model:show="showSelectWorkActivityPopup"
            position="bottom"
            duration="0"
            round
            :style="{ height: 'auto' }"
          >
            <SelectWorkActivity
              :shipLand="formData.shipLand"
              :ids="formData.workActivity"
              @isOpen="isSelectWorkActivityOpen"
              @selectedProcess="selectedWorkActivity"
            >
            </SelectWorkActivity>
          </van-popup>
          <van-field
            is-link
            readonly
            :border="formData.shipLand !== ''"
            v-model="formData.arrangeInfo"
            name="assemblyLine"
            rows="1"
            autosize
            type="textarea"
            label="作业线"
            placeholder="请选择作业线"
            @click="showSelectArrangePopup = true"
          />
          <van-popup
            v-model:show="showSelectArrangePopup"
            position="bottom"
            duration="0"
            round
            :style="{ height: 'auto' }"
          >
            <SelectShipArrange
              v-if="formData.shipLand === 'SHIP'"
              :transportShipId="input.shipId"
              :timeSpace="input.timeSpace"
              :planDate="input.tallyDate"
              @isOpen="isSelectArrangeOpen"
              @selectedArrange="selectedArrange"
            >
            </SelectShipArrange>
            <SelectLandArrange
              v-if="formData.shipLand === 'LAND'"
              :timeSpace="input.timeSpace"
              :planDate="input.tallyDate"
              @isOpen="isSelectArrangeOpen"
              @selectedArrange="selectedArrange"
            >
            </SelectLandArrange>
          </van-popup>
          <van-field
            v-if="formData.shipLand === 'SHIP'"
            is-link
            readonly
            :border="false"
            label="舱口"
            v-model="formData.holdName"
            name="assemblyLine"
            placeholder="请选择舱口"
            @click="showSelectHoldPopup = true"
          >
          </van-field>
          <van-popup
            v-model:show="showSelectHoldPopup"
            position="bottom"
            duration="0"
            round
            :style="{ height: 'auto' }"
          >
            <SelectHold
              :arrangeId="formData.arrangeId"
              :holdList="formData.holdsList"
              :selectedHold="formData.hold"
              @isOpen="isSelectHoldOpen"
              @selectHold="selectedHold"
            >
            </SelectHold>
          </van-popup>
          <van-field
            v-if="formData.shipLand === 'LAND'"
            :border="false"
            label="车数"
            v-model="formData.cars"
            name="cars"
            placeholder="请填写车数"
          >
          </van-field>
        </van-cell-group>
      </div>

      <div
        id="tallyVariousForm"
        class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
      >
        <div class="w h-[40px] flex justify-between">
          <div class="flex h w items-center font-bold">杂作业</div>
        </div>
        <van-cell-group :border="false">
          <van-field
            readonly
            name="position"
            placeholder="请选择货垛"
            is-link
            v-model="formData.oriStorageInfo"
            @click="showSelectStoragePopup = true"
            :rules="[{ required: true, message: '请选择货垛' }]"
          >
            <template #label> 货垛<span class="xing">*</span></template>
          </van-field>
          <van-popup
            v-model:show="showSelectStoragePopup"
            position="bottom"
            round
            duration="0"
            class="bg-slate-400 h-[calc(100vh-100px)]"
          >
            <SelectStorage
              :positionId="formData.oriStoragePositionId"
              :storageId="formData.oriStorageId"
              :transportBillId="billInfo.transportBillId"
              @isOpen="isSelectStorageOpen"
              @selectedStorage="selectedStorage"
            ></SelectStorage>
          </van-popup>
          <van-field
            readonly
            disabled
            v-model="formData.oriLeftPieceTon"
            name="leftPieceTon"
            label="货垛剩余"
          />
          <van-field
            readonly
            disabled
            v-model="formData.perTon"
            name="perTon"
            label="舱单单吨"
          />
          <van-field
            name="piece"
            v-model="formData.oriPiece"
            placeholder="请输入件数"
            :rules="[{ validator, message: '请输入件数' }]"
          >
            <template #label> 原始件数<span class="xing">*</span></template>
          </van-field>
          <van-field
            name="ton"
            v-model="formData.oriTon"
            @focus="setOriTon"
            placeholder="请输入吨数"
            :rules="[{ validator, message: '请输入吨数' }]"
          >
            <template #label> 原始吨数<span class="xing">*</span></template>
          </van-field>
          <van-field
            readonly
            name="position"
            placeholder="请选择货场"
            is-link
            v-model="formData.toStoragePositionName"
            @click="showSelectPositionPopup = true"
            :rules="[{ required: true, message: '请选择货场' }]"
          >
            <template #label> 理货货场<span class="xing">*</span></template>
          </van-field>
          <van-popup
            v-model:show="showSelectPositionPopup"
            position="bottom"
            round
            duration="0"
            :style="{ height: 'auto' }"
          >
            <SelectPosition
              @isOpen="isSelectPositionOpen"
              @selectedPosition="selectedPosition"
            ></SelectPosition>
          </van-popup>
          <van-field
            name="timeSpace"
            label="重垛"
            :rules="[{ required: true, message: '请选择重垛' }]"
          >
            <template #input>
              <van-radio-group
                shape="dot"
                v-model="isSpotSelect"
                direction="horizontal"
              >
                <van-radio icon-size="18px" name="Y">是</van-radio>
                <van-radio icon-size="18px" name="N">否</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-if="isSpotSelect === 'N'"
            name="position"
            v-model="formData.toSpot"
            placeholder="请填写货位并绘制地图"
            :rules="[{ required: true, message: '请填写货位' }]"
          >
            <template #label> 理货货位<span class="xing">*</span></template>
            <template #button>
              <van-button size="small" type="primary" @click="showYard = true"
              >绘图</van-button
              >
            </template>
          </van-field>
          <van-field
            v-if="isSpotSelect === 'Y'"
            name="position"
            v-model="formData.toSpot"
            placeholder="请选择货位并绘制地图"
            @click="showSelectSpotPopup = true"
            :rules="[{ required: true, message: '请选择货位' }]"
          >
            <template #label> 理货货位<span class="xing">*</span></template>
          </van-field>
          <van-popup
            v-model:show="showSelectSpotPopup"
            position="bottom"
            round
            duration="0"
            class="bg-slate-400 h-[calc(100vh-100px)]"
          >
            <SelectStorage
              :storageId="formData.toStorageId"
              :positionId="formData.toStoragePositionId"
              :transportBillId="billInfo.transportBillId"
              @isOpen="isSelectSpotOpen"
              @selectedStorage="selectedSpot"
            ></SelectStorage>
          </van-popup>
          <!--      <van-field-->
          <!--         -->
          <!--        name="position"-->
          <!--        label="规格/件号"-->
          <!--        placeholder="如需要请填写"-->
          <!--      />-->
          <van-field
            readonly
            name="tallyPackageType"
            label="包装"
            is-link
            placeholder="请选择包装"
            v-model="formData.toPackageTypeName"
            @click="showSelectPackageTypePopup = true"
            :rules="[{ required: true, message: '请选择包装' }]"
          >
            <template #label> 包装<span class="xing">*</span></template>
          </van-field>
          <van-popup
            v-model:show="showSelectPackageTypePopup"
            position="bottom"
            round
            duration="0"
            :style="{ height: 'auto' }"
          >
            <SelectPackageType
              @isOpen="isSelectPackageTypeOpen"
              @selectedPackageType="selectedPackageType"
            ></SelectPackageType>
          </van-popup>
          <van-field
            name="piece"
            v-model="formData.toPiece"
            placeholder="请输入件数"
            :rules="[{ validator, message: '请输入件数' }]"
          >
            <template #label> 理货件数<span class="xing">*</span></template>
          </van-field>
          <van-field
            name="ton"
            v-model="formData.toTon"
            @focus="setToTon"
            :border="false"
            placeholder="请输入吨数"
            :rules="[{ validator, message: '请输入吨数' }]"
          >
            <template #label> 理货吨数<span class="xing">*</span></template>
          </van-field>
        </van-cell-group>
      </div>

      <!-- 工人机械  -->
      <div
        id="safeProduction"
        class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
      >
        <div class="w h-[40px] flex justify-between">
          <div class="flex h w items-center font-bold">工人/机械</div>
        </div>
        <van-cell-group :border="false">
          <van-field
            is-link
            readonly
            :border="formData.machineTree.length > 0"
            v-model="formData.workerInfo"
            name="工人"
            label="工人"
            @click="showSelectWorkerPopup = true"
          />
          <van-popup
            v-model:show="showSelectWorkerPopup"
            position="bottom"
            duration="0"
            round
            :style="{ height: 'auto' }"
          >
            <SelectTeam
              @isOpen="isSelectTeamOpen"
              @selectedTeam="selectedTeam"
            ></SelectTeam>
          </van-popup>
          <div class="flex w flex-col mt-[10px]">
            <div
              :key="mk?.machineKind"
              v-for="mk in formData.machineTree"
              class="flex w gap-2 mb-[10px]"
            >
              <div
                class="flex w-auto h-[25px] py-[2px] px-[4px] bg-blue-300 text-sm text-white mr-[10px] justify-center items-center"
              >
                {{ mk?.machineKindName }}
              </div>
              <div class="flex flex-1 h-auto flex-wrap gap-2">
                <div
                  :key="machine?.machineId"
                  v-for="machine in mk.machineList"
                  @click="machine.isSelected = !machine.isSelected"
                  :class="
                    machine.isSelected
                      ? 'bg-blue-400 text-white'
                      : 'bg-gray-100 text-black'
                  "
                  class="flex w-auto h-auto py-[5px] px-[10px] text-sm"
                >
                  {{ machine?.fullMachineName }}
                </div>
              </div>
            </div>
          </div>
        </van-cell-group>
      </div>
    </form>
    <yard-map-v2
      v-if="showYard"
      :positionInfo="{ code: formData.toAreaCode }"
      :goodsPositionId="formData.toGoodsPositionId"
      @closeMap="showYard = false"
      @saved="onSelectedArea"
    ></yard-map-v2>
  </van-config-provider>
</template>

<style scoped></style>
